<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页轮播排序</title>
    <link  href="../images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/data_count.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/laydate.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="../css/sweetalert.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/skin/${user.skin}/css/left_menu.css"/>
    <script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone">
    <%@ include file="../left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
<!--右边导航下面内容-->
          <div class="message_hos_news_container">
              <div class='today_data'><span>今日实时关注数据</span></div>
              <div class="people_data">
                    <div class="people_data_list ui_border_green">
                         <div class="tip_one first">平台上线后,累计关注用户数量</div>
                        <div class="people_data_list_top ui_green">
                            <div class="ui_inner">
                            <div class="people_data_list_top_people ui_color_white">累计关注人数</div>
                            <div class="question_mark one"><img src="../images/question_mark.png"/></div>
                            <div class="clearfix"></div>
                           </div>
                            <div class='ui_inner ui_color_white'>9999</div>
                        </div>
                        <div class="ui_inner ui_color_grey">微信:88</div>
                        <div class="ui_inner ui_color_grey">支付宝:88</div>
                    </div>


                        <div class="people_data_list ui_border_red">
                          <div class="tip_one second">检索时间内,新增关注的用户数量</div>
                        <div class="people_data_list_top ui_red">
                        <div class="ui_inner">
                        <div class="people_data_list_top_people ui_color_white">累计关注人数</div>
                        <div class="question_mark two"><img src="../images/question_mark.png"/></div>
                        <div class="clear_fix"></div>
                        </div>
                        <div class='ui_inner ui_color_white'>9999</div>
                        </div>
                        <div class="ui_inner ui_color_grey">微信:88</div>
                        <div class="ui_inner ui_color_grey">支付宝:88</div>
                        </div>

                            <div class="people_data_list ui_border_purple">
                              <div class="tip_one third">检索时间内,取消关注的用户数量</div>
                            <div class="people_data_list_top ui_purple">
                            <div class="ui_inner">
                            <div class="people_data_list_top_people ui_color_white">累计关注人数</div>
                            <div class="question_mark three"><img src="../images/question_mark.png"/></div>
                            <div class="clear_fix"></div>
                            </div>
                            <div class='ui_inner ui_color_white'>9999</div>
                            </div>
                            <div class="ui_inner ui_color_grey">微信:88</div>
                            <div class="ui_inner ui_color_grey">支付宝:88</div>
                            </div>
                 <div class="clearfix"></div>
              </div>
            <div class="echart_pic">
    <div id="time_start"  class="date_choose laydate-icon"></div>
    <div id="time_end"  class="date_choose laydate-icon"></div>

    <div id="main2" style="height:400px;width:900px;margin-top:40px;"></div>



            </div>
          </div>
    </div>
    </div>
<%--点击搜索和选择科室替换--%>

    <script src="../js/sweetalert-dev.js"></script>
    <script src="../js/laydate.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="../js/echarts/js/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
    paths: {
    echarts: '../js/echarts/build/dist'
    }
    });

    // 使用
    require(
    [
    'echarts',
    'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
    ],
    function (ec) {
    // 基于准备好的dom，初始化echarts图表
    var myChart = ec.init(document.getElementById('main2'));

    var     option = {
    tooltip : {
    trigger: 'axis'
    },
    legend: {
    data:['累计关注人数','新增关注人数','取消关注人数']
    },
    toolbox: {
    show : true,
    feature : {

    dataView : {show: true, readOnly: false},

    }
    },
    calculable : true,
    xAxis : [
    {
    type : 'category',
    boundaryGap : false,
    data : ['1','2','3','4','5','6','7','8','9','10','11','12']
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    name:'累计关注人数',
    type:'line',
    stack: '',
    data:[75, 76, 81, 85, 80, 85, 83, 81, 82, 81, 82, 80]
    },
    {
    name:'新增关注人数',
    type:'line',
    stack: '',
    data:[70, 72, 77, 80, 81, 83, 80, 85, 79, 80, 81, 83]
    },
    {
    name:'取消关注人数',
    type:'line',
    stack: '',
    data:[72, 73, 71, 75, 83, 82, 84, 87, 82, 83, 85, 88]
    },

    ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    }
    );
    </script>
<script>

    $('.ui_nav_color_order').css({'border-bottom': '2px solid var(--color)','color': 'var(--color)'})

    $(".one img").hover(function(){
    $(".first").css("display","inline-block");
    },function(){
    $(".first").css("display","none");
    });
    $(".two img").hover(function(){
    $(".second").css("display","inline-block");
    },function(){
    $(".second").css("display","none");
    });
    $(".three img").hover(function(){
    $(".third").css("display","inline-block");
    },function(){
    $(".third").css("display","none");
    });

    laydate({
    elem: '#time_start',
    max: laydate.now(), //+1代表明天，+2代表后天，以此类推
    isclear: false, //是否显示清空<br/>
    istoday: false, //是否显示今天<br/>
    issure: true,
    choose: function(datas) { //选择日期完毕的回调
    }
    });
    laydate({
    elem: '#time_end',
    max: laydate.now(), //+1代表明天，+2代表后天，以此类推
    isclear: false, //是否显示清空<br/>
    istoday: false, //是否显示今天<br/>
    issure: true,
    choose: function(datas) { //选择日期完毕的回调
    }
    });

</script>
</body>
</html>
